<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="container">
        <div class="nav">
          <navigation :msg="navMsg"></navigation>
        </div>
        <div class="content">
          <div class="head">
            <div class="span">
              <b>微信设置</b>
              <span></span>
            </div>
          </div>
          <div id="weChat" :style="{ height:height }">
            <p class="ch">微信授权登入</p>
            <div class="we">
              <input type="checkbox" name="authorization" id="authorization" @click="selection()">
              <label for="authorization">开启微信授权登录</label>
              <p style="color:#20ADE5;">如何设置微信登录</p>
            </div>
            <img v-if="!judgmentOfState" src="../../../../static/images/register.png" alt>
            <div class="input" v-if="judgmentOfState">
              <p class="ch" style="font-size:14px;">
                步骤一：填写公众号信息
                <span class="iconfont icon-test102"></span>
              </p>
              <div class="box">
                <div class="box1">
                  <div class="item">
                    <span>*</span>
                    <span>Appld</span>
                  </div>
                  <div class="item">
                    <span>*</span>
                    <span>Secret</span>
                  </div>
                  <div class="item">
                    <span>*</span>
                    <span>验证文件名称</span>
                  </div>
                  <div class="item">
                    <span>*</span>
                    <span>验证文件内容</span>
                  </div>
                </div>
                <div class="box2">
                  <input type="text" name="appld" v-model="value" placeholder="请输入Appld">
                  <input type="text" name="secret" v-model="value" placeholder="请输入Secret">
                  <input type="text" name="name" v-model="value" placeholder="请输入验证文件名称">
                  <span>.txt</span>
                  <input type="text" name="content" v-model="value" placeholder="请输入验证文件内容">
                </div>
              </div>
              <p class="ch" style="font-size:14px;margin-top:-10px;">
                步骤二：公众号授权设置
                <span class="iconfont icon-test102"></span>
              </p>

              <div class="zi">
                <span class="z1">IP白名单：</span>
                <span>120.76.230.26</span>
                <span style="color:#20ADE5;">复制</span>
              </div>
              <div class="zi">
                <span>域名1：</span>
                <span>m.ysdinghuo.com</span>
                <span style="color:#20ADE5;">复制</span>
              </div>
              <div class="zi">
                <span>域名2：</span>
                <span>store116.ysdinghuo.com</span>
                <span style="color:#20ADE5;">复制</span>
              </div>
            </div>
          </div>
          <div class="btn">
            <button>
              <span class="iconfont icon-test129"></span>
              <span>保存</span>
            </button>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      judgmentOfState: false,
      navMsg: [
        {
          name: '设置',
          path: '/enterpriseInformation'
        },
        {
          name: '微信设置',
          path: ''
        }
      ]
    }
  },
  created () {
    this.getHeight()
  },
  methods: {
    selection () {
      this.judgmentOfState = !this.judgmentOfState
    },
    getHeight () {
      this.height = window.innerHeight - 180 + 'px'
    }
  },
  components: {
    VCommonHeaderLeft,
    navigation
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-right: 10px;
  .content {
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    .head {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #20ade5;
      border-bottom: 1px solid #e3e3e3;
      box-sizing: border-box;
      .span {
        width: 110px;
        position: relative;
        text-align: center;
        b {
          margin-left: 40px;
        }
        span {
          display: block;
          width: 110px;
          height: 2px;
          background-color: #20ade5;
          position: absolute;
          top: 35px;
          left: 20px;
        }
      }
    }
    #weChat {
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 20px;
      overflow-y: scroll;
      padding-bottom: 100px;
      .ch {
        display: inline-block;
        font-weight: 700;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-top: 10px;
        span {
          font-weight: normal;
          color: #666;
          margin-left: 5px;
        }
      }
      .we {
        display: flex;
        align-items: center;
        input[type="checkbox"] {
          width: 16px;
          height: 16px;
          display: inline-block;
          vertical-align: middle;
          outline: none;
          -webkit-appearance: none;
          background-color: none;
          border: 1px solid #333;
          margin-right: 8px;
          position: relative;
          cursor: pointer;
        }
        input[type="checkbox"]:checked::before {
          content: "00";
          color: transparent;
          background: url("../../../../static/images/xuanzhong.png") no-repeat;
          background-size: 16px 16px;
          position: absolute;
          top: -1px;
          left: -1px;
          border: 1px solid #fff;
        }
        label,
        p {
          font-size: 14px;
          padding-right: 8px;
          cursor: pointer;
        }
      }
      img {
        padding-top: 20px;
        padding-bottom: 20px;
      }
      .input {
        .box {
          display: flex;
          justify-content: space-between;
          .box1 {
            width: 60px;
            height: auto;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            margin-right: 5px;
            .item {
              text-align: right;
              width: 60px;
              height: auto;
              line-height: 15px;
              box-sizing: border-box;
              &:nth-of-type(1) {
                line-height: 30px;
                margin-top: 4px;
              }
              &:nth-of-type(2) {
                line-height: 30px;
                margin-top: 4px;
              }
              &:nth-of-type(3) {
                margin-bottom: 4px;
              }
              &:nth-of-type(4) {
                margin-bottom: 12px;
              }
              span:nth-of-type(1) {
                color: #ff3892;
                font-size: 10px;
              }
              span:nth-of-type(2) {
                font-size: 12px;
                color: #666;
              }
            }
          }
          .box2 {
            width: 93%;
            height: auto;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            input {
              display: inline-block;
              border: 1px solid #e3e3e3;
              color: #666;
              padding: 10px;
              box-sizing: border-box;
              height: 40px;
              font-size: 12px;
              width: 55%;
              margin-bottom: 10px;
              border-radius: 4px;

              &:hover {
                border-color: #20ade5;
              }
            }

            span {
              position: absolute;
              top: 56%;
              left: 52%;
              font-size: 12px;
            }
          }
        }
      }
      .zi {
        font-size: 12px;
        display: flex;
        align-content: center;
        .z1 {
          display: inline-block;
          color: #666;
          width: 45px;
          line-height: 15px;
        }

        span {
          height: 30px;
          line-height: 30px;
          margin-right: 10px;
        }
      }
    }
    .btn {
      width: 90%;
      height: 60px;
      background-color: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 1px solid #e3e3e3;
      padding-top: 10px;
      padding-bottom: 10px;
      box-sizing: border-box;
      position: fixed;
      bottom: 0px;
      button {
        margin-right: 40px;
        background-color: #37b5e8;
        width: 150px;
        height: 42px;
        line-height: 42px;
        font-size: 16px;
        color: #fff;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        padding: 0 18px;
        box-sizing: border-box;
        .iconfont {
          color: #fff;
          padding-right: 5px;
        }
      }
    }
  }
}
</style>
